<template>
      <!-- 工具箱 -->
    <div class="task-menuTab"
      :style="{
        transform:'translate3d('+taskMenuTabMove.x+'px,'+taskMenuTabMove.y+'px,1px)',
      }">
      <div class="task-menuTab-drag"
        @mousedown="taskMenuTabMove.taskMenuTabMoveStart"
        @mousemove="taskMenuTabMove.taskMenuTabMoveing"
        @mouseup="taskMenuTabMove.taskMenuTabMoveOver">
        <i class="el-icon-rank"></i> 工具箱
      </div>
      <div class="task-menuTab-body">
        <el-button v-if="taskMenuTabMove.full" 
          icon="el-icon-plus" 
          title="退出全屏" 
          @click="screenOperation('close')" >退出</el-button>
        <el-button v-if="!taskMenuTabMove.full" 
          icon="el-icon-plus" 
          title="全屏编辑" 
          @click="screenOperation('open')" >全屏</el-button>
        <div>
          <el-popover
            placement="right"
            width="200"
            trigger="click">
            <div class="task-menuTab-body-subject-type">
              <el-button slot="reference" title="添加单选"
                @click="0">
                暂存本试卷到浏览器
              </el-button>
              <el-button slot="reference" title="添加单选"
                @click="0">
                上传所有题目到题库
              </el-button>
              <el-button slot="reference" title="添加单选"
                @click="0"
                >
                保存本试卷为试卷模板
              </el-button>
            </div>
            <el-button slot="reference" icon="el-icon-upload2" title="暂存" 
              @click="0">暂存</el-button>
          </el-popover>
        </div>
        <div v-if="true">
          <el-popover
            placement="right"
            width="200"
            trigger="click">
            <div class="task-menuTab-body-subject-type">
              <div class="div-box">
                <el-button slot="reference"  icon="el-icon-plus" title="添加单选"
                  @click="addSubject('single')">
                  单选题型
                </el-button>
                <el-button slot="reference" class="btn-score"  icon="el-icon-news" 
                  title="设置分数" size="mini"
                  @click="setQuestionScore('singleData')">
                </el-button>
              </div>
              <div class="div-box">
                <el-button slot="reference"  icon="el-icon-plus" title="添加多选" 
                  @click="addSubject('multiple')">
                  多选题型
                </el-button>
                <el-button slot="reference" class="btn-score"  icon="el-icon-news" 
                  title="设置分数" size="mini"
                  @click="setQuestionScore('multipleData')">
                </el-button>
              </div>
              <div class="div-box">
                <el-button slot="reference"  icon="el-icon-plus" title="添加判断题" 
                  @click="addSubject('judge')">
                  判断题型
                </el-button>
                <el-button slot="reference" class="btn-score"  icon="el-icon-news" 
                  title="设置分数" size="mini"
                  @click="setQuestionScore('judgeData')">
                </el-button>
              </div>
              <!-- <div class="div-box">
                <el-button slot="reference"  icon="el-icon-plus" title="添加主观题" 
                  @click="addSubject('subject')">
                  主观题型
                </el-button>
                <el-button slot="reference" class="btn-score"  icon="el-icon-news" 
                  title="设置分数" size="mini"
                  @click="setQuestionScore('subject')">
                </el-button>
              </div> -->
            </div>
            <el-button slot="reference"  icon="el-icon-document" title="添加题型"
              @click="0" >加题</el-button>
          </el-popover>
        </div>
        <div>
          <el-button slot="reference" class="btn-score"  icon="el-icon-news" 
            title="设置分数" size="mini"
            @click="setQuestionScoreConfig()">
            分数
          </el-button>
        </div>
        <!-- <div><el-button circle icon="el-icon-finished" title="添加多选题型" @click="0" /></div>
        <div><el-button circle icon="el-icon-finished" title="添加判断题型" @click="0" /></div>
        <div><el-button circle icon="el-icon-finished" title="添加主观题型" @click="0" /></div> -->
        <div>
          <el-button  icon="el-icon-delete" title="删除此试卷？" @click="0" >删除</el-button>
        </div>
        <div>
          <el-button  icon="el-icon-success" type="primary" title="完事！，提交试卷!" @click="sunmitPaper()" >提交</el-button>
        </div>
      </div>
    </div>
</template>

<script>
import {BUS} from '../javascript/functions'
import {
  singleData, multipleData, judgeData
} from '../javascript/formatData'
export default {
  props: ['FormData'],
  data () {
    return {
      typeZH: {
        singleData: '单选题型',
        multipleData: '多选题型',
        judgeData: '判断题型'
      },
      taskMenuTabMove: {
        full: false,
        moving: false,
        start: [],
        x: '',
        y: '',
        // 移动事件
        taskMenuTabMoveStart: (e) => {
          const _this = this.taskMenuTabMove
          _this.moving = true
          // 获取初始位置
          // console.log(_this.start.length)
          if (_this.start.length) {
            _this.x = e.clientX - _this.start[0]
            _this.y = e.clientY - _this.start[1]
          } else {
            _this.start = [e.clientX, e.clientY]
          }
        },
        taskMenuTabMoveing: (e) => {
          const _this = this.taskMenuTabMove
          // console.log('move')
          if (_this.moving) {
            _this.x = e.clientX - _this.start[0]
            _this.y = e.clientY - _this.start[1]
          }
        },
        taskMenuTabMoveOver: (e) => {
          const _this = this.taskMenuTabMove
          _this.moving = false
          _this.x = e.clientX - _this.start[0]
          _this.y = e.clientY - _this.start[1]
        }
      }
    }
  },
  mounted () {
    // this.taskMenuTabMove.full = true
    // this.screenOperation('editTask fullTaskEidt')
  },
  methods: {
    // 设置题型分数
    setQuestionScore (type) {
      BUS.$emit('openScoreModel', {
        typeZH: this.typeZH[type],
        type: type,
        e: true
      })
    },
    setQuestionScoreConfig () {
      BUS.$emit('openScoreConfigModel', {
        e: true
      })
    },
    // 提交试卷
    sunmitPaper () {
      console.log(this.FormData)
    },
    // 全屏按钮
    screenOperation (type) {
      const option = {
        // 切换全屏
        'open': () => { this.taskMenuTabMove.full = !this.taskMenuTabMove.full },
        'close': () => { this.taskMenuTabMove.full = !this.taskMenuTabMove.full },
        // 切换样式代码
        'fullTaskEidt editTask': () => { document.getElementById('editTask').className = 'editTask' },
        'editTask fullTaskEidt': () => { document.getElementById('editTask').className = 'editTask' },
        'editTask': () => { document.getElementById('editTask').setAttribute('class', 'fullTaskEidt editTask') }
      }
    // 重置位移
      this.taskMenuTabMove.start = []
      this.taskMenuTabMove.x = 0
      this.taskMenuTabMove.y = 0
      /* eslint-disable*/
      this.taskMenuTabMove.moving = false
    // 改变标记状态
      option[type]()
      console.log(document.getElementById('editTask').className)
    // 改变 className
      option[document.getElementById('editTask').className]()
    },
    // 添加题型按钮
    addSubject (type) {
      const option = {
        single: () => {
          this.FormData.singleData.push(JSON.parse(JSON.stringify(singleData)))
          setTimeout(() => {
            console.log(this.FormData.singleData.length-1)
            document.getElementById('single' + (this.FormData.singleData.length - 1)).scrollIntoView({ block: 'start', behavior: 'smooth' })
          }, 200)
        },
        multiple: () => {
          this.FormData.multipleData.push(JSON.parse(JSON.stringify(multipleData)))
          setTimeout(() => {
            // console.log(this.FormData.multipleData.length-1)
            document.getElementById('multiple' + (this.FormData.multipleData.length - 1)).scrollIntoView({ block: 'start', behavior: 'smooth' })
          }, 200)
        },
        judge: () => {
          this.FormData.judgeData.push(JSON.parse(JSON.stringify(judgeData)))
          setTimeout(() => {
            console.log(this.FormData.judgeData.length-1)
            document.getElementById('judge' + (this.FormData.judgeData.length - 1)).scrollIntoView({ block: 'start', behavior: 'smooth' })
          }, 200)
        },
        programming: () => {
          this.FormData.singleData.push(JSON.parse(JSON.stringify(singleData)))
          setTimeout(() => {
            console.log(this.FormData.singleData.length-1)
            document.getElementById('single' + (this.FormData.singleData.length - 1)).scrollIntoView({ block: 'start', behavior: 'smooth' })
          }, 200)
        }
      }
      option[type]()
    }
  }
}
</script>

<style>

</style>